import React, { Component } from "react";
import { Text, View, StatusBar, Image } from "react-native";
import { connect } from "react-redux";
import ImagePicker from "react-native-image-picker";
import { Button, Toast, Portal } from "@ant-design/react-native";
import AlertModal from "components/AlertModal";
import RNFetchBlob from "react-native-fetch-blob";

import styles from "./styles";

const data = [
  {
    codeId: 1,
    codeName: "相册",
    codeValue: "1",
  },
  {
    codeId: 2,
    codeName: "拍照",
    codeValue: "2",
  },
];
class index extends Component {
  state = {
    // something: "",
    isShow: false,
  };

  componentDidMount() {
    StatusBar.setBarStyle("dark-content");
  }

  updateType = (type, itemVal) => {
    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
        skipBackup: true,
        path: "images",
      },
    };

    if (itemVal === "1") {
      ImagePicker.launchImageLibrary(options, response => {
        if (response.didCancel) {
          // console.log("User cancelled image picker");
        } else if (response.error) {
          // console.log("ImagePicker Error: ", response.error);
        } else {
          this.uploadImage(response);
        }
      });
    } else if (itemVal === "2") {
      ImagePicker.launchCamera(options, response => {
        if (response.didCancel) {
          // console.log("User cancelled image picker");
        } else if (response.error) {
          // console.log("ImagePicker Error: ", response.error);
        } else {
          this.uploadImage(response);
        }
      });
    }
  };

  /*
   *
   *   上传图片请求
   *   @param
   *   @returns
   * */
  upload = response => {
    // const { fileName: name, type, uri } = response;
    console.log(response);
    const form = new FormData();
    const file = {
      uri: response.uri,
      type: response.type,
      name: response.fileName,
      originalname: response.fileName,
      size: response.fileSize,
    };

    console.log(file);

    form.append("singleFile", file);

    const ToastKey = Toast.loading("上传中...", 6);
    // const url = "http://172.16.120.153:3000/upload/single";

    // fetch(url, {
    //   method: "POST",
    //   headers: {
    //     Accept: "application/json",
    //     "Content-Type": "multipart/form-data",
    //   },
    //   body: form,
    // })
    //   .then(res => {
    //     Portal.remove(ToastKey);
    //     console.log("image uploaded", res);
    //   })
    //   .catch(err => {
    //     Portal.remove(ToastKey);
    //     console.log(err);
    //   });

    const { dispatch } = this.props;

    dispatch({
      type: "mine/uploadFile",
      payload: { form, type: "00F" },
    }).then(res => {
      if (res !== null) {
        console.log(res);
        // resolve(null);
        Portal.remove(ToastKey);
        // if (res.data && res.data.url) {
        // dispatch({
        //   type: "mine/updateUser",
        //   payload: {
        //     userName,
        //   },
        // }).then(res2 => {});
        // }
      }
    });
  };

  // // **************文件上传**************
  uploadImage = response => {
    RNFetchBlob.fetch(
      "POST",
      "http://172.16.120.157:8222/manager/oss/upload?type=00F",
      {
        "Content-Type": "multipart/form-data",
      },
      [
        {
          name: "file",
          filename: "avatar-foo.png",
          type: response.type,
          data: RNFetchBlob.wrap(response.uri),
        },
        // elements without property `filename` will be sent as plain text
      ]
    )
      .then(resp => {
        // ...
        console.log(resp);
      })
      .catch(err => {
        // ...
        console.log(err);
      });
    //   fetch("http://172.16.120.153:3000/upload/single", {
  };

  render() {
    const { isShow } = this.state;

    return (
      <View style={styles.root}>
        {isShow && (
          <AlertModal
            data={data}
            updateType={this.updateType}
            ModalVisible={isShow}
            onClose={() => {
              this.setState({ isShow: false });
            }}
          />
        )}
        <Button
          type="primary"
          size="large"
          onPress={() => {
            this.setState({ isShow: true });
            // this.uploadImage();
          }}
        >
          上传
        </Button>
      </View>
    );
  }
}

export default connect()(index);
